<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/daterangepicker.css" />
<!--    <link rel="stylesheet" href="css/layui.css" />-->
    <script src="js/jquery.min.js"></script>
<!--    <script src="js/layui.js"></script>-->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/moment.js"></script>
    <script src="js/daterangepicker.js"></script>
</head>
<body>
<div id="container">
    <div id="top">
        <div id="title">
            <span>人资专题看板</span>
        </div>
    </div>
    <div id="left">
        <div id="laborStatistics">
            <span class="laborTitle">用工统计</span>
            <div id="laborChart"></div>
        </div>
        <div id="laborDistribution">
            <span class="disTitle">劳务/协力分布</span>
            <div id="selectGroup">
                <span class="selectOne">
                    <text>劳务单位</text>
                        <select>
                          <option value ="1">1</option>
                          <option value ="2">2</option>
                        </select>
                </span>
                <span class="selectTwo">
                    <text>协力单位</text>
                        <select>
                          <option value ="1">1</option>
                          <option value ="2">2</option>
                        </select>
                </span>
            </div>
            <div id="disTable">
                <table style="border: 1px solid #DADADA">
                    <tr>
                        <td>类别</td>
                        <td>炼钢</td>
                        <td>特钢</td>
                        <td>板材</td>
                        <td>公辅</td>
                        <td>物流</td>
                        <td>科技<br/>质量</td>
                        <td>公司办</td>
                        <td>总计</td>
                    </tr>
                    <tr style="background-color: #F6F8FF">
                        <td style="font-weight: bold;color: #000000">劳务<br/>单位</td>
                        <td>821</td>
                        <td>1201</td>
                        <td>1236</td>
                        <td>99</td>
                        <td>384</td>
                        <td>89</td>
                        <td>47</td>
                        <td>3877</td>

                    </tr>
                    <tr>
                        <td>协力</td>
                        <td>532</td>
                        <td>711</td>
                        <td>470</td>
                        <td>115</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>1828</td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="incomingAndOutgoing">
            <div id="incoming">
                <span class="inTitle">新进</span>
                <span class="cumulative">累计到X月</span>
                <div id="newTable">
                    <table>
                        <tr style="background-color: #F6F8FF">
                            <td>校招</td>
                            <td>社招</td>
                            <td>派遣转正</td>
                            <td>退役军人</td>
                            <td>劳务派遣</td>
                            <td>小计</td>
                        </tr>
                        <tr style="background-color: #FFFFFF">
                            <td>66</td>
                            <td>0</td>
                            <td>50</td>
                            <td>14</td>
                            <td>10</td>
                            <td>140</td>
                        </tr>
                    </table>
                </div>

            </div>
            <div id="outgoing">
                <span class="outTitle" style="margin-top: 57px;margin-left: 28px;margin-top: 153px;position:absolute;font-size: 18px;color: #4E4E4E;font-family: PingFangSC-Medium;
   ">退出</span>
                <div id="exitTable">
                    <table>
                        <tr style="background-color: #F6F8FF;">
                            <td>解除合同</td>
                            <td>退休</td>
                            <td>退养/编外</td>
                            <td>其他</td>
                            <td>派遣终止</td>
                            <td>小计</td>
                        </tr>
                        <tr>
                            <td>29</td>
                            <td>61</td>
                            <td>4</td>
                            <td>2</td>
                            <td>3</td>
                            <td>99</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div id="perOptimizationSchedule">
            <span class="perTitle">人员优化进度</span>
            <span class="perCumulative">累计到X月</span>
            <div id="perChart"></div>
        </div>
    </div>
    <div id="middle">
        <div id="attendanceStatistics">
            <span class="attTitle">出勤/到场统计</span>
            <div id="attTable">
                <table>
                    <tr style="background-color: #F6F8FF;">
                        <td>自主用工</td>
                        <td>出勤人数</td>
                        <td>出勤异常</td>
                        <td>出勤率</td>
                        <td>外协用工</td>
                        <td>到场人数</td>
                        <td style="font-weight: bold">到场合计</td>
                    </tr>
                    <tr style="background-color: #FFFFFF;font-weight: bold">
                        <td>合同制员工</td>
                        <td>7655</td>
                        <td>85</td>
                        <td>98.9%</td>
                        <td>劳务承包</td>
                        <td>3400</td>
                        <td></td>
                    </tr>
                    <tr style="background-color: #F6F8FF;font-weight: bold">
                        <td>劳务派遣工</td>
                        <td>690</td>
                        <td>10</td>
                        <td>98.6%</td>
                        <td>协力检修</td>
                        <td>1700</td>
                        <td>13445</td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="voluntaryLaborAttendanceRate">
            <div id="volRate">
                <span class="volTitle">自主用工出勤率</span>
                <img class="volRateDate" src="image/date.png" alt="">
                <input type="text" id="volRateDatePicker" class="volRateDatePicker">
                <div id="volRateChart"></div>
            </div>
            <div id="volCount">
                <span class="volTitleCount">劳务协力到场人数</span>
                <img class="volCountDate" src="image/date.png" alt="">
                <input type="text" id="volCountDatePicker" class="volRateDatePicker">
                <div id="volCountChart"></div>
            </div>

        </div>
        <div id="perCapitaSteelProducing">
            <span class="capTitle">人均产钢</span>
            <div id="capChart"></div>
        </div>
        <div id="costStatistics">
            <span class="costTitle">费用统计（薪酬不含福利/教育/会费）</span>
            <span class="costCumulative">累计到X月</span>
            <div id="costTable">
                <table id="coTabSty">
                    <tr style="background-color: #F6F8FF;height: 36.5px">
                        <td rowspan="2">板块</td>
                        <td colspan="2">合同制员工薪酬</td>
                        <td colspan="2">劳务派遣工薪酬</td>
                        <td colspan="2">外包费用</td>
                        <td colspan="2" rowspan="2">费用合计<br/>（万元）</td>
                    </tr>
                    <tr style="height: 36.5px">
                        <td>支出总额</td>
                        <td>人均</td>
                        <td>支出总额</td>
                        <td>人均</td>
                        <td>劳务</td>
                        <td>协力</td>
                    </tr>
                    <tr class="numTr">
                        <td>炼钢</td>
                        <td class="number">1</td>
                        <td class="number">2</td>
                        <td class="number">4</td>
                        <td class="number">1</td>
                        <td class="number">1</td>
                        <td class="number">1</td>

                    </tr>
                    <tr class="numTr">
                        <td>特钢</td>
                        <td class="number">1</td>
                        <td class="number">1</td>
                        <td class="number">4</td>
                        <td class="number">1</td>
                        <td class="number">1</td>
                        <td class="number">1</td>

                    </tr>
                    <tr class="numTr">
                       <td>板材</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>

                    </tr>
                    <tr class="numTr">
                        <td>公辅</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>

                    </tr>
                    <tr class="numTr">
                        <td>职能</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>

                    </tr>
                    <tr class="numTr">
                        <td>新产业</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>

                    </tr>
                    <tr  class="numTr">
                        <td>合计</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>

                    </tr>
                </table>

            </div>
        </div>
    </div>
    <div id="right">
        <div id="structure">
            <div id="strTitle">
                <span class="strTitleItem">合同制员工结构</span>

            </div>
            <div id="recordOfFormalSchooling">
                <span class="recordText">学历</span>
                <div id="recSelectGroup">
                <span class="recSelectOne">
                    <text>岗位序列</text>
                        <select>
                          <option value ="1">1</option>
                          <option value ="2">2</option>
                        </select>
                </span>
                    <span class="recSelectTwo">
                    <text>层级</text>
                        <select>
                          <option value ="1">1</option>
                          <option value ="2">2</option>
                        </select>
                </span>
                </div>
                <div id="recChart"></div>
            </div>
            <div id="age">
                <span class="ageText">年龄/性别</span>
                <span class="ageAvg">平均年龄42.3岁</span>
                <div id="ageChart"></div>
            </div>
            <div id="skills">
                <span class="skillsText">职称/技能</span>
                <div id="skillsTable">
                    <table>
                        <tr style="background-color: #F6F8FF">
                            <td>研究员级</td>
                            <td>高级</td>
                            <td>中级</td>
                            <td>初级</td>
                            <td>合计</td>
                        </tr>
                        <tr>
                            <td>64</td>
                            <td>409</td>
                            <td>1162</td>
                            <td>2792</td>
                            <td>4427</td>
                        </tr>
                    </table>
                    <table>
                        <tr style="background-color: #F6F8FF">
                            <td>高级技师</td>
                            <td>技师</td>
                            <td>高级工</td>
                            <td>中级工</td>
                            <td>初级工</td>
                            <td>合计</td>
                        </tr>
                        <tr>
                            <td>49</td>
                            <td>532</td>
                            <td>2712</td>
                            <td>3124</td>
                            <td>3364</td>
                            <td>9781</td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <div id="training">
            <span class="traTitle">培训</span>
            <div id="traChart"></div>
            <span class="traProgress">培训开班进度</span>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">45%</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>